<template>
	<view>
		<view class="tab_header">
			<view v-for="(item, index) in table" class="table_title" :class="[{'colors':current == index}]" :key="index" @tap="checkd(index)">
			<img :src="current == index?item.active:item.url"  alt="">
			
			<view>{{item.name}}</view>
			</view>
		</view>
		<scroll-view scroll-y v-if="current ==0" style="height: 100%;width: 100%;" >
			<view class="bar_body">
				<!-- <view class="cu-form-group border">
					<view class="title">分隔符：</view>
					<input  placeholder="如<1234-01>分隔符为-">
				</view> -->
				<view class="list_input" v-for="(item,index) in dividelist" :key="index">
					<!-- :class="indexs ==0?'flex1':'flex2'" -->
					<!-- this.divideindex = e
					this.divideindexs = e1 -->
					<view class="cu-form-group border" :class="divideindex==index&&divideindexs==indexs?'checkborder':''" 
					  :style="'flex:'+volist.flex"   v-for="(volist,indexs) in item.forname" :key="indexs">
						<view class="title">{{volist.name}}：</view> 
						<input @tap="checkdivide(index,indexs)" v-if="index==0" type="text" @blur="defaults" :placeholder="index==0?'如<1234-01>分隔符为-':volist.name" v-model="volist.value">
						<input @tap="checkdivide(index,indexs)" v-else type="digit" @blur="defaults" :placeholder="index==0?'如<1234-01>分隔符为-':volist.name" v-model="volist.value">
						</view>
				</view>
				<view class="cu-form-group" style="justify-content: end;">
					<view class="title" style="font-size: 14px;">是否启用</view>
					<view class="issuccess" @tap="clickenable(0)"><img :src="Enable==0?'/static/image/noradius.png':''" alt=""></view>
				</view>
				
			</view>
		</scroll-view>
		
		<scroll-view scroll-y v-if="current ==1" style="height: 100%;width: 100%;" >
			<view class="bar_body">
				<!-- <view class="cu-form-group border">
					<view class="title">内容总长度：</view>
					<input  placeholder="0为不定长度">
				</view> -->
				<view class="list_input" v-for="(item,index) in sublist" :key="index">
					<!-- :class="indexs ==0?'flex1':'flex2'" -->
					<!-- :class="indexs ==0?'flex1':'flex2'" :class="index == 2&&indexs ==0?'flex3':'flex4'" -->
					<view class="cu-form-group border "  :class="divideindex==index&&divideindexs==indexs?'checkborder':''"   v-for="(volist,indexs) in item.forname" :style="'flex:'+volist.flex" :key="indexs">
						<view class="title">{{volist.name}}：</view>
						<input @tap="checkdivide(index,indexs)" @blur="defaults"  v-model="volist.value" :placeholder="index ==0?'0为不定长度':''">
						<!-- :placeholder="volist.name" -->
						</view>
				
				</view>
				<view class="cu-form-group" style="justify-content: end;">
					<view class="title" style="font-size: 14px;">是否启用</view>
					<view class="issuccess" @tap="clickenable(1)"><img :src="Enable==1?'/static/image/noradius.png':''" alt=""></view>
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y v-if="current ==2" style="height: 100%;width: 100%;" >
			<view class="bar_body">
				<!-- <view class="cu-form-group border" v-for="(item,index) in loselist" :key="index">
					<view class="title">{{item.name}}：</view>
					<input  placeholder="">
				</view> -->
				<view class="list_input" v-for="(item,index) in loselist" :key="index">
					<view class="cu-form-group border "  :class="divideindex==index&&divideindexs==indexs?'checkborder':''"   v-for="(volist,indexs) in item.forname" :style="'flex:'+volist.flex" :key="indexs">
						<view class="title">{{volist.name}}：</view>
						<input @tap="checkdivide(index,indexs)" @blur="defaults"  v-model="volist.value">
						<!-- :placeholder="volist.name" -->
						</view>
				
				</view>
				<!-- <view class="cu-form-group border">
					<view class="title">忽略条码后多少位内容：</view>
					<input  placeholder="">
				</view> -->
			</view>
		</scroll-view>
		<view class="confirm" @tap="confirm">保存</view>
	</view>
</template>

<script>
	import * as GetApi from '@/syApis/syHttp/Http.js';
	export default {
		data() {
			return {
				// active
				table: [{
					name:'分隔规则',
					url:"../static/image/divide.png",
					active:"../static/image/activedivide.png"},
					{
					name:'截取规则',
					url:"../static/image/sub.png",
					active:"../static/image/activesub.png"},
				    {
					name:'忽略前后',
					url:"../static/image/lose.png",
					active:"../static/image/activelose.png"}
					],
				current: 0,
				dividelist:[
					{forname:[{name:'分隔符',value:'',flex:'1'}]},
					{forname:[{name:'条码位置',value:'',flex:'5'},{name:'编号位置',value:'',flex:'4'}]},
					{forname:[{name:'数量位置',value:'',flex:'5'},{name:'数量小数位',value:'',flex:'4'}]},
					{forname:[{name:'单价位置',value:'',flex:'5'},{name:'单价小数位',value:'',flex:'4'}]},
					{forname:[{name:'序列号位置',value:'',flex:'5'},{name:'批号位置',value:'',flex:'4'}]},
					{forname:[{name:'颜色位置',value:'',flex:'5'},{name:'尺码位置',value:'',flex:'4'}]}
				],
				sublist:[
					{forname:[{name:'内容总长度',value:'',flex:'1'}]},
					{forname:[{name:'条码起始位',value:'',flex:'5'},{name:'结束位',value:'',flex:'4'}]},
					{forname:[{name:'编号起始位',value:'',flex:'5'},{name:'结束位',value:'',flex:'4'}]},
					{forname:[{name:'数量起始位',value:'',flex:'3'},{name:'结束位',value:'',flex:'2'},{name:'小数位',value:'',flex:'2'}]},
					{forname:[{name:'单价起始位',value:'',flex:'3'},{name:'结束位',value:'',flex:'2'},{name:'小数位',value:'',flex:'2'}]},
					{forname:[{name:'序列号起始位',value:'',flex:'5'},{name:'结束位',value:'',flex:'4'}]},
					{forname:[{name:'批号起始位',value:'',flex:'5'},{name:'结束位',value:'',flex:'4'}]},
					{forname:[{name:'颜色',value:'',flex:'5'},{name:'结束位',value:'',flex:'4'}]},
					{forname:[{name:'尺码',value:'',flex:'5'},{name:'结束位',value:'',flex:'4'}]},
				],
				loselist:[
					{forname:[{name:'忽略条码前多少位内容',value:''}]},
					{forname:[{name:'忽略条码后多少位内容',value:''}]},
				],
				divideindex:-1,
				divideindexs:-1,
				Enable:0,//是否启用
				
			}
		},
		created() {
			var setting = uni.getStorageSync("BarCode")
			var that = this
			if(setting !=""&& typeof setting != undefined){
				console.log(setting)
				var config = JSON.parse(setting)
				console.log(config)
				console.log(config.BarRule_All_Length)
				console.log(this.dividelist)
				
				that.dividelist[0].forname[0].value = config.Rule_Separate;//  分隔符
				that.dividelist[1]["forname"][0]["value"] = config.Rule_Bar;// 条码位置
				that.dividelist[1]["forname"][1]["value"] = config.Rule_Code;// 编码位置
				that.dividelist[2]["forname"][0]["value"] = config.Rule_Num;// 数量位置0
				that.dividelist[2]["forname"][1]["value"] = config.Rule_Num_Demical;// 数量小数位
				that.dividelist[3]["forname"][0]["value"] =  config.Rule_Price;// 单价位置
				that.dividelist[3]["forname"][1]["value"] = config.Rule_Price_Demical;//单价小数位
				that.dividelist[4]["forname"][0]["value"] = config.Rule_SN;//序列号位置
				that.dividelist[4]["forname"][1]["value"] = config.Rule_BatchNo;// 批号位置
				that.dividelist[5]["forname"][0]["value"] = config.Rule_Color;// 颜色为止
				that.dividelist[5]["forname"][1]["value"] = config.Rule_Size;// 尺码位置
				// that.Enable = config.Separate_IsEnable;// 是否启用分隔规则
				that.sublist[0]["forname"][0]["value"] = config.BarRule_All_Length;//  条码内容总长度
				that.sublist[1]["forname"][0]["value"] = config.BarRule_CutBar_Start;// 条码起始位
				that.sublist[1]["forname"][1]["value"] = config.BarRule_CutBar_End;//  条码结束位
				that.sublist[2]["forname"][0]["value"] = config.BarRule_CutCode_Start;// 编码起始
				that.sublist[2]["forname"][1]["value"] = config.BarRule_CutCode_End;// 编码结束
				that.sublist[3]["forname"][0]["value"] = config.BarRule_CutNum_Start;// 数量开始
				that.sublist[3]["forname"][1]["value"] = config.BarRule_CutNum_End;//  数量结束
				that.sublist[3]["forname"][2]["value"] = config.BarRule_CutNum_Demical;// 数量小数位
				that.sublist[4]["forname"][0]["value"] = config.BarRule_CutPrice_Start;// 单价开始
				that.sublist[4]["forname"][1]["value"] = config.BarRule_CutPrice_End;// 单价结束
				that.sublist[4]["forname"][2]["value"] = config.BarRule_CutPrice_Demical;// 单价小数位
				that.sublist[5]["forname"][0]["value"] = config.BarRule_CutSN_Start;//序列号起始
				that.sublist[5]["forname"][1]["value"] = config.BarRule_CutSN_End;// 序列号结束
				that.sublist[6]["forname"][0]["value"] = config.BarRule_CutBatchNo_Start;// 批号起始
				that.sublist[6]["forname"][1]["value"] = config.BarRule_CutBatchNo_End;// 批号结束
				that.sublist[7]["forname"][0]["value"] = config.BarRule_CutColor_Start;// 颜色起始
				that.sublist[7]["forname"][1]["value"] = config.BarRule_CutColor_End;// 颜色结束
				that.sublist[8]["forname"][0]["value"] = config.BarRule_CutSize_Start;// 尺码开始
				that.sublist[8]["forname"][1]["value"] = config.BarRule_CutSize_End;//  尺码结束
				// that.Enable=config.Cut_IsEnable;//  其否启用截取规则
				that.loselist[0]["forname"][0]["value"] = config.Ignore_Befor;//  忽略前位数
				that.loselist[1]["forname"][0]["value"] = config.Ignore_After;// 忽略后位数
				that.Enable = config.Cut_IsEnable !=""?config.Cut_IsEnable:config.Separate_IsEnable
			
			}
			
		},
		methods: {
			checkd:function(index){
				this.current = index
			},
			//保存
			confirm:function(){
				var all = null
				var that = this
				uni.showModal({
					title: '提示',
					content: '是否将当前条码规则应用于所有操作员?',
					style:'z-index:99999',
					cancelText:'否',
					confirmText:'是',
					success: function(res) {
						if (res.confirm) {
							// console.log('点击了是')
							  all = 1;
						} else if (res.cancel) {
							  all = 0;
							// console.log('点击了否')
						}
						
					},
					complete:function(){
						// var UserCode = uni.getStorageSync("UserCode");
						// var LoginCode = uni.getStorageSync("LoginCode");
						var Save_M_Data_Json = {
							Rule_Separate:that.dividelist[0]["forname"][0]["value"]+"",//  分隔符
							Rule_Bar:that.dividelist[1]["forname"][0]["value"]+"",// 条码位置
							Rule_Code:that.dividelist[1]["forname"][1]["value"]+"",// 编码位置
							Rule_Num :that.dividelist[2]["forname"][0]["value"]+"",// 数量位置0
							Rule_Num_Demical:that.dividelist[2]["forname"][1]["value"]+"",// 数量小数位
							Rule_Price:that.dividelist[3]["forname"][0]["value"]+"",// 单价位置
							Rule_Price_Demical :that.dividelist[3]["forname"][1]["value"]+"",//单价小数位
							Rule_SN :that.dividelist[4]["forname"][0]["value"]+"",//序列号位置
							Rule_BatchNo:that.dividelist[4]["forname"][1]["value"]+"",// 批号位置
							Rule_Color:that.dividelist[5]["forname"][0]["value"]+"",// 颜色为止
							Rule_Size:that.dividelist[5]["forname"][1]["value"]+"",// 尺码位置
							Separate_IsEnable:(that.Enable ==0?1:0)+"",// 是否启用分隔规则
							BarRule_All_Length:that.sublist[0]["forname"][0]["value"]+"",//  条码内容总长度
							BarRule_CutBar_Start:that.sublist[1]["forname"][0]["value"]+"",// 条码起始位
							BarRule_CutBar_End:that.sublist[1]["forname"][1]["value"]+"",//  条码结束位
							BarRule_CutCode_Start:that.sublist[2]["forname"][0]["value"]+"",// 编码起始
							BarRule_CutCode_End:that.sublist[2]["forname"][1]["value"]+"",// 编码结束
							BarRule_CutNum_Start:that.sublist[3]["forname"][0]["value"]+"",// 数量开始
							BarRule_CutNum_End:that.sublist[3]["forname"][1]["value"]+"",//  数量结束
							BarRule_CutNum_Demical:that.sublist[3]["forname"][2]["value"]+"",// 数量小数位
							BarRule_CutPrice_Start:that.sublist[4]["forname"][0]["value"]+"",// 单价开始
							BarRule_CutPrice_End:that.sublist[4]["forname"][1]["value"]+"",// 单价结束
							BarRule_CutPrice_Demical:that.sublist[4]["forname"][2]["value"]+"",// 单价小数位
							BarRule_CutSN_Start:that.sublist[5]["forname"][0]["value"]+"",//序列号起始
							BarRule_CutSN_End:that.sublist[5]["forname"][1]["value"]+"",// 序列号结束
							BarRule_CutBatchNo_Start:that.sublist[6]["forname"][0]["value"]+"",// 批号起始
							BarRule_CutBatchNo_End:that.sublist[6]["forname"][1]["value"]+"",// 批号结束
							BarRule_CutColor_Start:that.sublist[7]["forname"][0]["value"]+"",// 颜色起始
							BarRule_CutColor_End:that.sublist[7]["forname"][1]["value"]+"",// 颜色结束
							BarRule_CutSize_Start:that.sublist[8]["forname"][0]["value"]+"",// 尺码开始
							BarRule_CutSize_End:that.sublist[8]["forname"][1]["value"]+"",//  尺码结束
							Cut_IsEnable:(that.Enable ==1?1:0)+"",//  其否启用截取规则
							Ignore_Befor:that.loselist[0]["forname"][0]["value"]+"",//  忽略前位数
							Ignore_After :that.loselist[1]["forname"][0]["value"]+"",// 忽略后位数
						};
						console.log('执行了')
						console.log(Save_M_Data_Json)
						var Save_M_Data_Json = JSON.stringify(Save_M_Data_Json);
						let data = {
							IsAll:all+"",
							Save_M_Data_Json:Save_M_Data_Json,
						}
						console.log(data)
						// console.log(that.dividelist[0]["forname"][0]["value"])
						// return
						GetApi.Save_BarcodeRule(data, function(res) {
							if (res.state) {
								console.log(res.data)
								if(res.data.ErrorMsg !=""){
									GetApi.showTip("保存失败!");
								}else if(res.data.TipsMsg=='OK'){
									uni.setStorageSync("BarCode",Save_M_Data_Json);
									GetApi.showTip("保存成功!");
								}
							} else {
						            GetApi.showTip("服务器错误!");
							}
						});
					}
				});
				
				return
				// var UserCode  = uni.getStorageSync("UserCode","");
				
			},
			checkdivide:function(e,e1){
				// console.log(e,e1)
				this.divideindex = e
				this.divideindexs = e1
			},
			defaults:function(){
				this.divideindex = -1
				this.divideindexs = -1
			},
			clickenable:function(evt){
				this.Enable = this.Enable==evt?-1:evt
			},
			
			
		}
	}
</script>

<style lang="scss">
	// #d8d1d1
	// #0081FF
	
	
	// 1.#bfbfbf 8a8a8a
	// 2.#0081FF
.tab_header{
	height: 100upx;
	background-color: #fff;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	color: #000;
	// border-bottom: 1px solid #2196F3;
	font-size: 14px;
	box-shadow: 0px 1px 5px  #d8d4d4;
	// -moz-box-shadow:0px 10px 5px #333333; -webkit-box-shadow:0px 10px 5px #333333; box-shadow:0px 10px 5px #333333;
}
.table_title{
	// border-bottom: 2px solid #fff;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	color: #8a8a8a;
}
.table_title>img{
	width: 23px;
	height: 23px;
	padding-right: 5px;
}
.colors{
	color: #0081FF;
	// border-bottom: 2px solid #fff;
}
.bar_body{
	margin: 10px;
}
.border{
	// border: 1px solid #2196F3;
	border: 1px solid #d8d1d1;
	margin: 5px;
	border-radius: 3px;
	min-height: 90upx;
	box-shadow: 0px 0px 1px #d8d4d4;
	// margin: 10px;
}
.checkborder{
	border: 1px solid #0081FF;
}
.list_input{
	display: flex;
	flex-direction: row;
}
.cu-form-group{
	padding: 0.5px 5px;
}

.confirm{
	width: 96%;
	height: 100upx;
	background-color: rgb(124, 170, 216);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 22px;
	position: fixed;
	bottom: 3px;
	left: 2%;
	border-radius: 5px;
	box-shadow: 0 2px 8px rgba(211, 209, 209, 0.75);
}
.cu-form-group .title{
	font-size: 11px;
	padding: 0;
}
.cu-form-group uni-input{
	padding: 0;
}
.issuccess{
	width: 25px;
	height: 25px;
	border: 1px solid #b3b3b3;
	border-radius: 3px;
	margin-left: 12px;
	
}
.issuccess>img{
	width: 100%;
	height: 100%;
	
}
</style>
